<template>
  <div class="wrapper">
    <div class="header" id="fixedBox">
<!--     个人信息栏 根据登陆状态切换 -->
      <div class="Info" @click="login">
        <div v-if="isLogin" class="avatar">
          <van-icon name="manager" color="rgb(72, 204, 252)"/>
        </div>
        <div v-else class="avatar">
          <el-icon :size="40" color="rgb(74, 189, 254)">
            <Eleme />
          </el-icon>
        </div>
        <div v-if="isLogin" class="phoneNumber">wxk</div>
        <div v-else style="font-size: 4.5vw">
         登录/注册
        </div>
      </div>
      <el-dropdown>
        <div class="icon">
          <van-icon name="setting-o" />
        </div>
        <template #dropdown>
          <el-dropdown-menu @click="remove">
            <el-dropdown-item v-if="isLogin">退出登录</el-dropdown-item>
            <el-dropdown-item v-else>登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="vip">
      <div class="vip-panel">
        <div class="vip-left">
          <i style="  margin-left: 1.5vw;;color:rgb(94, 103, 118);font-size: 3.5vw" class="fa-solid fa-rocket"></i>
          <div class="vip-text">白银会员 |</div>
        </div>
        <div class="vip-mid">12月会员特权已到账</div>
        <div class="vip-right">
          <div class="right-box">去解锁</div>
        </div>
      </div>
    </div>
    <div class="option">
      <div class="option-panel">
        <div class="option-item">
          <img src="@/assets/imgs/myCenter/myCenter_p1.png"  />
          <div class="option-name">超级吃货卡</div>
          <div class="option-desc">无门槛大额红包</div>
        </div>
        <div class="option-item">
          <div class="option-item">
            <img src="@/assets/imgs/myCenter/myCenter_p2.png"  />
            <div class="option-name">吃货豆</div>
            <div class="option-desc">0豆可用</div>
          </div>
        </div>
        <div class="option-item">
          <div class="option-item">
            <img src="@/assets/imgs/myCenter/myCenter_p3.png"  />
            <div class="option-name">红包</div>
            <div class="option-desc">6张可用</div>
          </div>
        </div>
      </div>
    </div>
    <div class="myOrder">
      <div class="order-panel">
        <div class="orderTitle">我的订单</div>
        <div class="orderContent">
          <div class="orderItem">
            <van-icon  size="7vw" name="description-o" />
            <div style="margin-top:2vw;font-size: 4vw">全部</div>
          </div>
          <div class="orderItem">
            <van-icon  size="7vw" name="bulb-o" />
            <div style="margin-top:2vw;font-size: 4vw">进行中</div>
          </div>
          <div class="orderItem">
            <van-icon  size="7vw" name="comment-circle-o" />
            <div style="margin-top:2vw;font-size: 4vw">待评价</div>
          </div>
          <div class="orderItem">
            <van-icon  size="7vw" name="cash-o" />
            <div style="margin-top:2vw;font-size: 4vw">退款</div>
          </div>
        </div>
      </div>
    </div>
    <div class="myWallet">
      <div class="wallet-panel">
        <div class="panel-top">
          <div class="left">我的钱包</div>
          <div class="right">进入<i class="fa-solid fa-angle-right"></i></div>
        </div>
        <div class="panel-mid">
          <div class="midItem">
            <div class="text">
              <div style="font-size: 5.5vw;font-weight: bolder;">20</div>
              <div style="font-size: 3vw;margin-top: 2.5vw;margin-left: 0.5vw">万</div>
            </div>
            <div style="margin-top:2vw;font-size: 4vw">借钱</div>
          </div>
          <div class="midItem">
            <div class="text">
              <div style="font-size: 5.5vw;font-weight: bolder;">420</div>
              <div style="font-size: 3vw;margin-top: 2.5vw;margin-left: 0.5vw">元</div>
            </div>
            <div style="margin-top:2vw;font-size: 4vw">外卖红包</div>
          </div>
          <div class="midItem">
            <div class="text">
              <div style="font-size: 5.5vw;font-weight: bolder;">1</div>
              <div style="font-size: 3vw;margin-top: 2.5vw;margin-left: 0.5vw">笔</div>
            </div>
            <div style="margin-top:2vw;font-size: 4vw">现金奖励</div>
          </div>
          <div class="midItem">
            <div class="text">
              <div style="font-size: 5.5vw;font-weight: bolder;">10</div>
              <div style="font-size: 3vw;margin-top: 2.5vw;margin-left: 0.5vw">元</div>
            </div>
            <div style="margin-top:2vw;font-size: 4vw">银行福利</div>
          </div>

        </div>
      </div>
    </div>
    <div class="interCenter">
      <div class="inter-panel">
        <div class="inter-title">互动中心</div>
        <div class="inter-mid">
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon1.png"/>
            <p>游乐园</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon2.png" />
            <p>闯关赢大奖</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon3.png"/>
            <p>0元夺宝</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon4.png"/>
            <p>天天抽奖</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon5.png"/>
            <p>跳一跳</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon6.png" />
            <p>饭搭子</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon7.png"/>
            <p>合成甜蜜蜜</p>
          </div>
          <div class="interItem">
            <img src="@/assets/imgs/myCenter/CenterIcon8.png" />
            <p>梦幻小屋</p>
          </div>
        </div>
      </div>
    </div>
    <div>&nbsp;</div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import useUserStore from "@/store/modules/user.ts";
import {useRouter} from "vue-router";

//用户是否登录
const isLogin=ref<boolean>(false);
let $router=useRouter();
//pinia仓库
let useStore=useUserStore();

onMounted(()=>{
  //检查token是否存在
  if(useStore.token){
    isLogin.value=true;
  }
})
const login=()=>{
  if(isLogin.value==false){
    $router.push({ path: '/login' })
  }
}
const remove=()=>{
  useStore.userLogout();
  //重定向
  $router.push({ path: '/login' })
}

</script>

<style scoped>
.wrapper{
  width: 100%;
  height: 100vh;
  background: rgb(225, 238, 246);
}

/*首部导航*/
.wrapper .header{
  width:100%;
  height:15vw;

  display: flex;
  align-items: center;
  background-color: rgb(225, 238, 246);
}
.wrapper .header .Info{
  display:flex;
  align-items: center;
  margin-left: 5vw;
}
.wrapper .header .Info .avatar{
  font-size: 4.5vw;
  margin-left: 1.5vw;
}
.wrapper .header .Info .phoneNumber{
  font-size: 4.5vw;
  margin-left: 1.5vw;
}
.wrapper .header .icon{
  margin-left: 55vw;
  font-size: 6vw;
}
/*vip 栏*/
.wrapper .vip{
  width: 100%;
  height: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(227, 237, 246);
}
.wrapper .vip .vip-panel{
  width: 95%;
  border-radius:20px 20px 0 0 ;
  background-color: rgb(37, 45, 68);
  height: 15vw;

  display: flex;
  align-items: center;
}
.wrapper .vip .vip-panel .vip-left{
  display: flex;
  align-items: center;
}
.wrapper .vip .vip-panel .vip-left .vip-text{
  margin-left: 1.5vw;
  font-size: 4.5vw;
  color:rgb(94, 103, 118);
  font-weight: bold;
  width: 24vw;
}
.wrapper .vip .vip-panel .vip-mid{
  width: 60vw;
  font-size: 4vw;
  display: flex;
  align-items: center;
  color: rgb(231, 241, 252);
}
.wrapper .vip .vip-panel .vip-right{
  display: flex;
  align-items: center;
  width: 35vw;
  margin-left: 10vw;
}
.wrapper .vip .vip-panel .vip-right .right-box{
  height: 7.5vw;
  width:18vw ;
  background: rgb(238, 244, 253);
  border-radius: 15vw;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.8vw;
  cursor: pointer ;
}
/*option栏*/
.wrapper .option{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}
.wrapper .option .option-panel{
  width: 100%;
  background-color: rgb(225, 238, 246);
  border-radius:10px 10px 0 0 ;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .option .option-panel .option-item{
  display: flex;
  flex-direction: column;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  /*盒子预先设置宽度*/
  width: 28vw;
}
.wrapper .option .option-panel .option-item img{
  margin-top: 5vw;
  width: 12vw;
  height:8vw;
}
.wrapper .option .option-panel .option-item .option-name{
  margin-top: 3.5vw;
  font-size: 5vw;
  font-weight: bold;
}
.wrapper .option .option-panel .option-item .option-desc{
  margin-top: 3.5vw;
  color: gray;
  font-size: 4vw;
}

/*order 栏*/
.wrapper .myOrder{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 5vw;
}
.wrapper .myOrder .order-panel{
  width: 95%;
  background-color: #fff;
  border-radius:5vw;

  display: flex;
  flex-direction: column;
}
.wrapper .myOrder .order-panel .orderTitle{
  margin-top: 2.5vw;
  margin-left: 4.5vw;
  height: 5vw;
  font-weight: bolder;
  font-size: 4.5vw;
}
.wrapper .myOrder .order-panel .orderContent{
  height: 25vw;

  display: flex;
  justify-content:space-around;
  align-items: center;
}
.wrapper .myOrder .order-panel .orderContent .orderItem{
  width: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*wallet栏*/
.wrapper .myWallet{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5vw;
}
.wrapper .myWallet .wallet-panel{
  width: 95%;
  background-color: #fff;
  border-radius:5vw;

  display: flex;
  flex-direction: column;
}
.wrapper .myWallet .wallet-panel .panel-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .myWallet .wallet-panel .panel-top .left{
  margin-top: 2.5vw;
  margin-left: 4.5vw;
  height: 5vw;
  font-weight: bolder;
  font-size: 4.5vw;
}
.wrapper .myWallet .wallet-panel .panel-top .right{
  height: 5vw;
  color: gray;
  font-size: 3.5vw;
  margin-top: 2.5vw;
  margin-right: 4.5vw;
}
.wrapper .myWallet .wallet-panel .panel-mid{
  height: 25vw;

  display: flex;
  justify-content:space-around;
  align-items: center;
}
.wrapper .myWallet .wallet-panel .panel-mid .midItem{
  width: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper .myWallet .wallet-panel .panel-mid .midItem .text{
  display: flex;
}

/*interCenter栏*/
.wrapper .interCenter{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5vw;
}
.wrapper .interCenter .inter-panel{
  width: 95%;
  background-color: #fff;
  border-radius:5vw;

  display: flex;
  flex-direction: column;
}
.wrapper .interCenter .inter-panel .inter-title{
  margin-top: 2.5vw;
  margin-left: 4.5vw;
  height: 5vw;
  font-weight: bolder;
  font-size: 4.5vw;
}

.wrapper .interCenter .inter-panel .inter-mid{
  height: 35vw;
  margin-top: 2.5vw;
  display: flex;
  justify-content:space-around;
  align-items: center;
  /*换行*/
  flex-wrap: wrap;
}
.wrapper .interCenter .inter-panel .inter-mid .interItem{
  width: 20vw;
  height: 18vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.wrapper .interCenter .inter-panel .inter-mid .interItem img{
  width: 12vw;
  height: 10vw;
}
.wrapper .interCenter .inter-panel .inter-mid .interItem p{
  font-size: 4vw;
  margin-top: 0.5vw;
}

</style>